{include file="public/meat" title="广告列表"/}
<div class="cx-fex-c">
    <div class="x11 pad-t15 pad-b10">
        <div class="cx-fex-c">
            <div class="layout">
                <a href="{:url('index')}" class="button bg-blue">返回列表</a>
            </div>
        </div>
    </div>
    <div class="x11">
        <fieldset class="cx-field">
            <legend class="cx-field-legend">添加/编辑广告</legend>
            <form class="layui-form" id="addform"  role="form" action="" method="post" enctype="multipart/form-data">
                <div class="cx-fex-c mb-15">
                    <div class="x3 t-r">
                        <label class="lab">广告名称（<span class="t-red">*</span> ）</label>
                    </div>
                    <div class="xs8 xl9">
                        <input class="ipt" name="title" required lay-verify="required" type="text" value="{$postdb.title|default=''}">
                    </div>
                </div>
                <div class="cx-fex-c mb-15">
                    <div class="x3 t-r">
                        <label class="lab">广告内容（<span class="t-red">*</span> ）</label>
                    </div>
                    <div class="xs8 xl9">
                        <div id="upgg" class="layout b-a pad-a10">
                            {switch name="postdb.seetype"}
                            {case value="1"}
                            <div class="layout cx-fex-l mb-15">
                                <div style="flex-grow: 0;">
                                    <label class="lab">广告图片</label>
                                </div>
                                <div style="flex-grow: 2;">
                                    <div class="cx-fex-l fex-items-c">
                                        <img class="pinimgimg" src="{$postdb.cont.img|default=''}" onerror="this.src='__ADMIN__/imgnone.png'" alt='' style='max-width:200px;max-height:100px'>
                                        <input name="cont[img]" class="ipt pinimgval" placeholder="默认值一般为空" type="hidden" value="{$postdb.cont.img|default=''}" >
                                        <div class='ml-10'>
                                            <span class="pinimgtext"></span>
                                            <a class="button bg-green uploadbtn mr-5" data-img="pinimgimg" data-val="pinimgval" data-text="pinimgtext" data-del="pinimgdel" lay-data="{method:'post',accept:'file',data:'dfile',field:'pinimg'}"><i class="cx-icon cx-icon-shangchuan1"></i>上传图片</a>
                                            <a class="button bg-red pinimgdel cx-click" data-img="pinimgimg" data-val="pinimgval" data-type="closdiv" {notpresent name="postdb.cont.img"}style="display:none;"{/notpresent}><i class="cx-icon cx-icon-lajixiang"></i>删除</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout cx-fex-l mb-15">
                                <div style="flex-grow: 0;">
                                    <label class="lab">图片标题</label>
                                </div>
                                <div style="flex-grow: 2;">
                                    <input class="ipt" name="cont[title]" required lay-verify="required" type="text" value="{$postdb.cont.title|default=''}">
                                </div>
                            </div>
                            <div class="layout cx-fex-l mb-15">
                                <div style="flex-grow: 0;">
                                    <label class="lab">链接地址</label>
                                </div>
                                <div style="flex-grow: 2;">
                                    <input class="ipt" name="cont[url]" required lay-verify="required" type="text" value="{$postdb.cont.url|default=''}">
                                </div>
                            </div>
                            {/case}
                            {case value="2"}
                            <div class="layout cx-fex-l addhdgg">
                                <a class="button bor-green dfeilds" data-acc="img" data-tabd="imgstab" data-valname="cont" lay-data="{method:'post',accept:'images',data:'img',field:'imgs'}"><i class="cx-icon cx-icon-shangchuan1"></i>选择并上传图片</a>
                                <table class="layui-table mt-10">
                                    <thead>
                                    <tr>
                                        <th>广告图片</th>
                                        <th class="t-c">内容</th>
                                        <th class="t-c">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="imgstab">
                                    {volist name="postdb.cont|default=''" id="cx" empty="" key="k"}
                                    <tr>
                                        <td>
                                            <img class="ad{$k}img mb-10" src="{$cx.img|default=''}" onerror="this.src='__ADMIN__/imgnone.png'" alt='' style='max-width:200px;max-height:100px'>
                                            <input name="cont[{$k}][img]" class="ipt ad{$k}val" placeholder="默认值一般为空" type="hidden" value="{$cx.img|default=''}" >
                                        </td>
                                        <td class="t-c">
                                            <div class="layout cx-fex-l mb-15">
                                                <div style="flex-grow: 0;">
                                                    <label class="lab">图片标题</label>
                                                </div>
                                                <div style="flex-grow: 2;">
                                                    <input class="ipt" name="cont[{$k}][title]" required lay-verify="required" type="text" value="{$cx.title|default=''}">
                                                </div>
                                            </div>
                                            <div class="layout cx-fex-l mb-15">
                                                <div style="flex-grow: 0;">
                                                    <label class="lab">链接地址</label>
                                                </div>
                                                <div style="flex-grow: 2;">
                                                    <input class="ipt" name="cont[{$k}][url]" required lay-verify="required" type="text" value="{$cx.url|default=''}">
                                                </div>
                                            </div>
                                            <div class="layout cx-fex-l">
                                                <div style="flex-grow: 0;">
                                                    <label class="lab">广告排序</label>
                                                </div>
                                                <div style="flex-grow: 2;">
                                                    <input class="ipt" name="cont[{$k}][sort]" required lay-verify="required" type="text" value="{$cx.sort|default=''}">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="t-c"><a class="button bg-red cx-click" data-type="clostr">删除</a></td>
                                    </tr>
                                    {/volist}
                                    </tbody>
                                </table>
                            </div>
                            {/case}
                            {case value="3"}
                            <div class="layout cx-fex-c fex-column">
                                <div class="layout cx-fex-l mb-15">
                                    <div style="flex-grow: 0;">
                                        <label class="lab">广告图片</label>
                                    </div>
                                    <div style="flex-grow: 2;">
                                        <div class="cx-fex-l fex-items-c">
                                            <img class="pinimgimg" src="{$postdb.cont.img|default=''}" onerror="this.src='__ADMIN__/imgnone.png'" alt='' style='max-width:200px;max-height:100px'>
                                            <input name="cont[img]" class="ipt pinimgval" placeholder="默认值一般为空" type="hidden" value="{$postdb.cont.img|default=''}" >
                                            <div class='ml-10'>
                                                <span class="pinimgtext"></span>
                                                <a class="button bg-green uploadbtn mr-5" data-img="pinimgimg" data-val="pinimgval" data-text="pinimgtext" data-del="pinimgdel" lay-data="{method:'post',accept:'file',data:'dfile',field:'pinimg'}"><i class="cx-icon cx-icon-shangchuan1"></i>上传图片</a>
                                                <a class="button bg-red pinimgdel cx-click" data-img="pinimgimg" data-val="pinimgval" data-type="closdiv" {notpresent name="postdb.cont.img"}style="display:none;"{/notpresent}><i class="cx-icon cx-icon-lajixiang"></i>删除</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layout cx-fex-l mb-15">
                                    <div style="flex-grow: 0;">
                                        <label class="lab">图片标题</label>
                                    </div>
                                    <div style="flex-grow: 2;">
                                        <input class="ipt" name="cont[title]" required lay-verify="required" type="text" value="{$postdb.cont.title|default=''}">
                                    </div>
                                </div>
                                <div class="layout cx-fex-l mb-15">
                                    <div style="flex-grow: 0;">
                                        <label class="lab">链接地址</label>
                                    </div>
                                    <div style="flex-grow: 2;">
                                        <input class="ipt" name="cont[url]" required lay-verify="required" type="text" value="{$postdb.cont.url|default=''}">
                                    </div>
                                </div>
                                <div class="layout cx-fex-l">
                                    <div style="flex-grow: 0;">
                                        <label class="lab">文字内容</label>
                                    </div>
                                    <div style="flex-grow: 2;">
                                        <textarea class="ipt" name="cont[content]">{$postdb.cont.content|default=''}</textarea>
                                    </div>
                                </div>
                            </div>
                            {/case}
                            {case value="4"}
                            <div class="layout cx-fex-c fex-column">
                                <div class="layout cx-fex-l mb-15">
                                    <div style="flex-grow: 0;">
                                        <label class="lab">广告标题</label>
                                    </div>
                                    <div style="flex-grow: 2;">
                                        <input class="ipt" name="cont[title]" required lay-verify="required" type="text" value="{$postdb.cont.title|default=''}">
                                    </div>
                                </div>
                                <div class="layout cx-fex-l mb-15">
                                    <div style="flex-grow: 0;">
                                        <label class="lab">链接地址</label>
                                    </div>
                                    <div style="flex-grow: 2;">
                                        <input class="ipt" name="cont[url]" required lay-verify="required" type="text" value="{$postdb.cont.url|default=''}">
                                    </div>
                                </div>
                                <div class="layout cx-fex-l">
                                    <div style="flex-grow: 0;">
                                        <label class="lab">文字内容</label>
                                    </div>
                                    <div style="flex-grow: 2;">
                                        <textarea class="ipt" name="cont[content]">{$postdb.cont.content|default=''}</textarea>
                                    </div>
                                </div>
                            </div>
                            {/case}
                            {/switch}
                        </div>
                    </div>
                </div>
                <div class="cx-fex-c mb-15">
                    <div class="x3 t-r">
                        <label class="lab">显示/隐藏（<span class="t-red">*</span> ）</label>
                    </div>
                    <div class="xs8 xl9">
                        <input name="status" value="1" {eq name="$postdb.status|default='1'" value="1"}checked="checked"{/eq} title="显示" type="radio">
                        <input name="status" value="0" {eq name="$postdb.status|default='1'" value="0"}checked="checked"{/eq} title="隐藏" type="radio">
                    </div>
                </div>
                <div class="cx-fex-c mb-15">
                    <div class="x3 t-r"></div>
                    <div class="xs8 xl9">
                        <input type="hidden" name="seetype" required lay-verify="required|number" value="{$postdb.seetype}">
                        <input type="hidden" name="id" value="{$postdb.id|default=''}">
                        <input type="hidden" name="__token__" required lay-verify="required" value="{$Request.token}" />
                        <button class="button bg-blue" lay-submit lay-filter="">立即提交</button>
                    </div>
                </div>
            </form>
        </fieldset>
    </div>
</div>
<div style="height: 20px; overflow: hidden"></div>
{include file="public/js" /}
<script>
    layui.config({
        base: '__ADMIN__/js/'
    }).use('app');
    layui.define('upload', function(exports){
        var layupload = layui.upload;
        var uplogo = layupload.render({
            elem: '.uploadbtn',
            url:"{:url('Uploads/index')}",
            before: function(obj){
                layer.load();
            },
            done: function(res, index, upload){
                var cx = this.item.context.dataset;
                layer.closeAll('loading');
                if(res.code != 0){
                    $('.'+cx.text).html('<span style="color: #FF5722;">上传失败</span> <a class="btn size-S btn-primary-outline reload">重试</a>');
                    $('.'+cx.text).find('.reload').on('click', function(){
                        uplogo.upload();
                    });
                    return layer.msg(res.msg,{time: 2000});
                }
                $('.'+cx.img).attr('src','/'+ res.src);
                $('.'+cx.val).val(res.src);
                $('.'+cx.del).show();
                $('.'+cx.text).hide();
                return layer.msg(res.msg,{time: 2000})
            },
            error: function(){
                var cx = this.item.context.dataset;
                layer.closeAll('loading');
                $('.'+cx.text).html('<span style="color: #FF5722;">上传失败</span> <a class="btn size-S btn-primary-outline reload">重试</a>');
                $('.'+cx.text).find('.reload').on('click', function(){
                    uplogo.upload();
                });
            }
        });
        var dfeilds = layupload.render({
            elem: '.dfeilds',
            url:"{:url('Uploads/index')}",
            multiple: true,
            done: function(res, index, upload){
                var cx = this.item.context.dataset;
                var imgsee =  '<td><img src="/'+ res.src +'" style="max-width: 200px;height: 80px"><input type="hidden" name="'+ cx.valname +'['+ res.title +'][img]" class="ipt" value="'+ res.src +'"></td>';
                var tr = $(['<tr id="upload-'+ index +'">',
                    imgsee,
                    "<td><div class='layout cx-fex-l mb-15'><div style='flex-grow: 0;'><label class='lab'>图片标题</label></div><div style='flex-grow: 2;'><input class='ipt' name='"+cx.valname +'['+ res.title +"][title]' required lay-verify='required' type='text' value=''></div></div><div class='layout cx-fex-l mb-15'><div style='flex-grow: 0;'><label class='lab'>链接地址</label></div><div style='flex-grow: 2;'><input class='ipt' name='"+cx.valname +'['+ res.title +"][url]' required lay-verify='required' type='text' value=''></div></div><div class='layout cx-fex-l'><div style='flex-grow: 0;'><label class='lab'>广告排序</label></div><div style='flex-grow: 2;'><input class='ipt' name='"+cx.valname +'['+ res.title +"][sort]' requiredlay-verify='required' type='text' value=''></div></div></td>",
                    '<td class="t-c">',
                    '<button class="button bor-red m-reload layui-hide">重传</button>',
                    '<button class="button bg-red m-delete">删除</button>',
                    '</td>',
                    '</tr>'].join(''));
                if(res.code != 0){ //上传成功
                    var tr = $('#'+cx.tabel).find('tr#upload-'+ index),
                        tds = tr.children();
                    tds.eq(3).find('.m-reload').removeClass('layui-hide'); //显示重传
                }
                tr.find('.m-delete').on('click', function(){
                    tr.remove();
                    dfeilds.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });
                $('#'+cx.tabd).append(tr);
                this.error(index, upload);
            },
            error: function(index, upload){
                var cx = this.item.context.dataset;
                var tr = $('#'+cx.tabel).find('tr#upload-'+ index),
                    tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    });

</script>
{include file="public/footer" /}